<script setup>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElIcon, ElNotification } from 'element-plus'
import { Plus, X } from '@element-plus/icons-vue'

// 表单数据
const formData = ref({
  name: '',
  studentId: '',
  class: '',
  gender: '',
  age: '',
  contact: ''
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
  studentId: [{ required: true, message: '请输入学号', trigger: 'blur' }],
  class: [{ required: true, message: '请选择班级', trigger: 'change' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', message: '年龄必须是数字', trigger: 'blur' },
    { min: 1, max: 100, message: '年龄必须在1-100之间', trigger: 'blur' }
  ],
  contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
}

// 班级选项
const classOptions = ref([
  { value: '1班', label: '1班' },
  { value: '2班', label: '2班' },
  { value: '3班', label: '3班' },
  { value: '4班', label: '4班' },
  { value: '5班', label: '5班' }
])

// 性别选项
const genderOptions = ref([
  { value: '男', label: '男' },
  { value: '女', label: '女' }
])

// 提交表单
const submitForm = async () => {
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 500))
    ElNotification.success('学生添加成功')
    // 重置表单
    formData.value = {
      name: '',
      studentId: '',
      class: '',
      gender: '',
      age: '',
      contact: ''
    }
  } catch (error) {
    ElNotification.error('学生添加失败')
    console.error('Failed to add student:', error)
  }
}
</script>

<template>
  <div class="add-student-container">
    <div class="header">
      <h2>新增学生</h2>
    </div>

    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      class="add-student-form"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入学生姓名" />
      </el-form-item>
      <el-form-item label="学号" prop="studentId">
        <el-input v-model="formData.studentId" placeholder="请输入学号" />
      </el-form-item>
      <el-form-item label="班级" prop="class">
        <el-select v-model="formData.class" placeholder="请选择班级">
          <el-option v-for="option in classOptions" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="formData.gender" placeholder="请选择性别">
          <el-option v-for="option in genderOptions" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="formData.age" type="number" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="联系方式" prop="contact">
        <el-input v-model="formData.contact" placeholder="请输入联系方式" />
      </el-form-item>

      <el-form-item>
        <div class="form-buttons">
          <el-button type="primary" @click="submitForm">
            <el-icon><Plus /></el-icon> 保存
          </el-button>
          <el-button @click="resetForm">
            <el-icon><X /></el-icon> 重置
          </el-button>
          <el-button @click="goBack">返回</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.add-student-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.add-student-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
</style>